<template>
<div class="a">
  <el-container>
    <!--头部 -->
    <el-header>
      <div style="margin-left: 40px;">
        <h3>电商后台数据</h3>
      </div>
      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>
            <el-button type="text">个人中心</el-button>
          </el-dropdown-item>
          <el-dropdown-item>
            <el-popover placement="top" width="160" v-model="visible">
              <p>你确认退出吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="logout">确定</el-button>
              </div>
              <el-button type="text" slot="reference">用户退出</el-button>
            </el-popover>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <!-- 菜单加内容 -->
    <el-container class="home-container">
      <div class="b">
        <el-aside width="240px" style="height:100%">
          <!--左边菜单-->
          <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" :unique-opened="true" router>
            <el-menu-item index="hemo">
              <i class="el-icon-s-home"></i>
              <span slot="title">Home</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-s-data"></i>
                <span>运营数据</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="S2-1">订单情况</el-menu-item>
                <el-menu-item index="J2-2">网站统计</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="S4-2">商品类别</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>会员管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="H5-1">后台用户</el-menu-item>
                <el-menu-item index="H5-2">前台会员</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--  -->
            <el-menu-item index="B7">
              <i class="el-icon-document"></i>
              <span slot="title">帮助</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
      </div>
      <!-- 右边内容 -->
      <el-main>
        <!-- 路由站位 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</div>
</template>

<script>
export default {
  data () {
    return {
      visible: false
    }
  },
  methods: {

    // 退出
    logout () {
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.a {
  // background: #8d8282;
  height: 100%;
  width: 1000px;
  margin: 0 auto;
  // background-repeat: no-repeat;
}

.b {
  height: 600px;
  background-color: #545c64;
}

.el-header {
  background-color: #545c64;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #fff;
  font-size: 20px;

  h>div {
    display: flex;
    align-items: center;
    margin: 0 auto;

    spen {
      margin: 0 auto;
    }
  }
}

.home-container {
  height: 100%
}

.el-aside {

  // background-color: rgba(119, 114, 114, 0.933);
  .el-menu {
    border-right: none;
  }
}

// .el-main {
//   background-color: rgba(230, 164, 164, 0.933);
// }
</style>
